{extend name="base"}
{block name="style"}
<link rel="stylesheet" href="{:_static()}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/main.css" media="all" />

<!-- <script src="{:_static()}/cdn/echarts-en.common.js"></script> -->
<script src="https://cdn.staticfile.org/echarts/4.2.0-rc.1/echarts-en.common.min.js" charset="UTF-8"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.1/c3.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.1/c3.min.js"></script>

{/block}
{block name="main"}
<div id="app" v-cloak>
  <el-row class="p_y20">
    <el-col :span="24">
      <el-card style="height: 500px;" id="count-chart">
        <!-- 整站数据总量统计表 -->
      </el-card>
    </el-col>
  </el-row>
</div>
{/block}
{block name="vue"}
<script>
var app=new Vue({
  el:'#app',
    mixins:[],
  data:{
        options:{$options|raw},
        // options:{
        //     title: {
        //         text: 'ECharts 入门示例'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data:['销量']
        //     },
        //     xAxis: {
        //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '销量',
        //         type: 'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //     }]
        // },
        // finance:{$finance|raw},
  },
    mounted(){
        // this.showCharts();
    },
  methods:{
        showCharts(){
            //C3js例子参考： https://c3js.org/examples.html#style
            let self=this;
                finance=self.finance;
            let finance_chart = c3.generate({
                bindto: '#finance_chart',
                data: {
                    x:'x',
                    names:finance.title,
                    columns: [
                        finance.x,
                        finance.vip_buy,
                        finance.bonus_gain,
                        finance.week_bonus_gain,
                        finance.agent_bonus,
                        finance.withdraw_cash,
                        finance.coin_buy,
                        finance.income,
                        finance.expenditure,
                        finance.profit,
                    ],
                    
                },
                axis:{
                    x:{
                        tick:{
                            format:x=>self.dateFormat(x*1000,'Y-m-d')
                        }
                    }
                },
                padding: {
                    right: 50,
                    left: 50,
                },
            });
        },
  },
});

// 整站数据总量统计表
var countOption = {
    title: {
      top:'5px',
      left:'10px',
        text: '数据统计',
        subtext: '代理数据总量统计表'
    },
    tooltip: {trigger: 'axis'},
    legend: {top:'5px',},
    toolbox: {
        show : true,
        top:'5px',
        right: '10px',
        feature : {
            magicType : {show: true, type: ['line'],title:''},
            restore : {show: true,title:[]},
            saveAsImage : {show: true,title:[]},
        }
    },
    xAxis: {
        data: app.options.countOption.xAxis
    },
    yAxis: {},
    series: [
      {
          name: '总数',
          type: 'bar',
          label:{
            show:true
          },
          data: app.options.countOption.data
      },
    ]
};
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('count-chart')).setOption(countOption);

</script>
{/block}